<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <button @click="addAttr">新增一个height属性</button>
      <button @click="deleteAttr">删除age属性</button>
      <p>姓名:{{person.name}}</p>
      <p>性别:{{person.sex}}</p>
      <p>年龄:{{person.age}}</p>
      <p>身高:{{person.height}}</p>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            person: {
              name: "张三",
              age: 18,
              sex: "男",
            },
          };
        },
        methods: {
          addAttr() {
            /* 
              Vue提供了一个set方法,可以新增或修改某个属性的值
              在vm实例上也有一个$set方法,和Vue.set是同一个方法
            */

            console.log(Vue.set === this.$set);
            // Vue.set(this.person, "height", "170");
            this.$set(this.person, "height", "170");
          },
          deleteAttr() {
            /* 
              Vue提供了一个delete方法,可以删除对象中的某个属性
              在vm实例上也有一个$delete方法,和Vue.delete是同一个方法
            */
            // Vue.delete(this.person, "age");
            this.$delete(this.person, "age");
          },
        },
      });
    </script>
  </body>
</html>
